<template>
  <q-carousel
    infinite
    swipeable
    animated
    autoplay
    transition-prev="slide-right"
    transition-next="slide-left"
    v-model="banner"
    ref="bannerRef"
  >
    <q-carousel-slide
      v-for="{ id, img } in bannerList"
      :key="id"
      :name="id"
      :img-src="`src/assets/images${img}`"
    />
    <template v-slot:control>
      <q-carousel-control :offset="[18, 18]" class="focusBox">
        <q-btn
          push
          round
          dense
          class="prev"
          @click="$refs.bannerRef.previous()"
        />
        <q-btn push round dense class="next" @click="$refs.bannerRef.next()" />
      </q-carousel-control>
    </template>
  </q-carousel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ImgData } from '@/constants/constantType'

defineProps<{ bannerList: Array<ImgData> }>()

const banner = ref<number>(1)
</script>

<style lang="scss" scoped></style>
